<template>
    <div>
        <el-tabs type="border-card" v-model="hiddenTroubleVo.dealStatus" @tab-click="handleClick">
            <el-tab-pane label="全部隐患" ></el-tab-pane>
            <el-tab-pane label="待审核" ></el-tab-pane>
            <el-tab-pane label="待处理" ></el-tab-pane>
            <el-tab-pane label="待验证" ></el-tab-pane>
            <el-tab-pane label="已完成" ></el-tab-pane>
            <el-table
                    :data="hiddenTroubles"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
<!--                            <el-form-item label="名称">-->
<!--                                <span>{{ props.row.name }}</span>-->
<!--                            </el-form-item>-->
                            <el-form-item label="描述">
                                <span>{{ props.row.description }}</span>
                            </el-form-item>
                            <el-form-item label="类型">
                                <span>{{ props.row.hiddenTroubleType.name }}</span>
                            </el-form-item>
                            <el-form-item label="地点">
                                <span>{{ props.row.place }}</span>
                            </el-form-item>
                            <el-form-item label="处理状态">
                                <span>{{ props.row.dealStatus }}</span>
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-button
                                        type="info"
                                        size="mini"
                                        @click="addHeader(props.row.id)"
                                        v-if="props.row.header==null||props.row.header==''">
                                    添加
                                </el-button>
                                <div  v-if="props.row.header!=null">
                                <span>{{ props.row.header.name }}</span>
                                <el-button
                                        type="info"
                                        size="mini"
                                        @click="updateHeader(props.row.id)"
                                        v-if="props.row.dealStatus=='1'||props.row.dealStatus=='2'">
                                    更改
                                </el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="上报人"
                        prop="reportPeople">
                </el-table-column>
                <el-table-column
                        label="上报时间"
                        prop="reportDate">
                </el-table-column>
                <el-table-column
                        label="结束时间"
                        prop="endDate">
                </el-table-column>
                <el-table-column
                        label="联系电话"
                        prop="phone">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tabs>
        <el-dialog :visible.sync="dialogHeader">
            <div class="block" size="mini">
                <el-pagination

                        :page-sizes="headerPageInfo.pageSizes"
                        :page-size="headerPageInfo.pageSize"
                        :current-page="headerPageInfo.pageNum"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="headerPageInfo.totalPage"
                >
                </el-pagination>
            </div>
            <el-table :data="headers"
                      size="mini" >
                <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column label="姓名" prop="name" width="100"> </el-table-column>
                <el-table-column label="联系方式" prop="phone" width="150"></el-table-column>
                <el-table-column label="邮箱" prop="email" width="180"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleAddHeader(scope.$index, scope.row)">指派</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
    // import Header from "./Header.vue"
    export default {
        // components:{Header},
        data(){
            return{
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    totalPage: 0,
                    pageSizes: [5, 10, 15, 20]
                },
                headerPageInfo:{
                    pageNum: 1,
                    pageSize: 10,
                    totalPage: 0,
                    pageSizes: [5, 10, 15, 20]
                },
                addHeaderId:"",
                headers:[],
                header:{
                    id:0,
                    name:"",
                    phone:"",
                    email:""
                },
                headerVo:{
                    id:0,
                    name:"",
                    phone:"",
                    email:"",
                    pageNum:"",
                    pageSize:""
                },
                hiddenTrouble:{
                    id:0,
                    name:"",
                    place:"",
                    description:"",
                    dealStatus:"",
                    reportDate:"",
                    endDate:"",
                    hiddenTroubleType:{
                      id:0,
                      name:""
                    },
                    header:{
                        id:0,
                        name:"",
                        phone:"",
                        email:"",
                    },
                    reportPeople:"",
                    phone:""
                },
                hiddenTroubles:[],
                hiddenTroubleVo:{
                    id:0,
                    name:"",
                    place:"",
                    description:"",
                    dealStatus:"",
                    reportDate:"",
                    hiddenTroubleTypeId:0,
                    headerId:0,
                    endDate:"",
                    reportPeople:"",
                    phone:"",
                    pageNum:"",
                    pageSize:""
                },
                dialogHeader:false,
            }
        },
        methods:{
            handleAddHeader(index,row){
                console.log(this.headerVo)
                this.hiddenTroubleVo.headerId=row.id;
                this.hiddenTroubleVo.id=this.addHeaderId
                this.hiddenTroubleVo.dealStatus="2"
                console.log("hiddenVo",this.hiddenTroubleVo)
                this.$axios.post("/api/xjh/hidden/update",this.hiddenTroubleVo).then(r=>{
                    if(r.data.code==200){
                        console.log("修改成功")
                        this.dialogHeader=false;
                        this.headerVo.id=0;
                        this.hiddenTroubleVo.headerId=0;
                        this.hiddenTroubleVo.dealStatus="0"
                        this.getList()
                    }
                })
            },
            updateHeader(id){
                this.dialogHeader=true;
                this.addHeaderId=id;
            },
            addHeader(id){
                this.dialogHeader=true;
                this.addHeaderId=id;
            },
            handleClick(tab,event){
                this.hiddenTroubleVo.dealStatus=tab.index;
                // if(this.hiddenTroubleVo.dealStatus=="0"){
                //     this.hiddenTroubleVo.dealStatus==""
                // }
                // console.log(tab.index)
                this.getList()
            },
            getList(){

                //昨天写道这，增加负责人，把其状态改为2，表示已审核完成
                console.log("条件hidden:",this.hiddenTroubleVo)
                console.log("条件headerVo:",this.headerVo)
                this.$axios.post("/api/xjh/hidden/getByCondition",this.hiddenTroubleVo).then(r=>{
                    if(r.data.code==200){
                        this.hiddenTroubles=r.data.data.list;
                        console.log(r.data.data.list)
                    }
                })
                this.$axios.post("/api/xjh/header/getByCondition",this.headerVo).then(r=>{
                    if(r.data.code==200){
                        this.headers=r.data.data.list;
                        this.headerPageInfo.totalPage=r.data.data.total;
                        console.log(r.data.data.list)
                    }
                })
            },
        },
        created(){
            this.hiddenTroubleVo.pageNum=this.pageInfo.pageNum;
            this.hiddenTroubleVo.pageSize=this.pageInfo.pageSize;
            this.headerVo.pageNum=this.headerPageInfo.pageNum;
            this.headerVo.pageSize=this.headerPageInfo.pageSize;
            this.getList()
        }
    }
</script>